<template>
  <div class="login-container">
    <div class="login-box" v-show="!changePassword">
      <h1 style="font-size: 28px; text-align: center; color: #ffffff">
        轻炎食后台管理
      </h1>

      <el-form
        ref="loginFormRef"
        :model="form"
        :rules="LoginRules"
        class="login-form"
      >
        <el-form-item prop="phone">
          <el-input
            placeholder="请输入用户名"
            prefix-icon="el-icon-user-solid"
            v-model="form.phone"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            v-model="form.password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="code
"
        >
          <div style="display: flex; gap: 12px">
            <el-input
              placeholder="请输入验证码"
              v-model="form.code"
              @keyup.enter.native="login"
            ></el-input>
            <span
              v-html="svg_captcha"
              @click="getSvgCaptcha"
              style="width: 30%"
            ></span>
          </div>
        </el-form-item>
        <el-form-item class="login-btn">
          <el-button
            type="info"
            @click="handleChangePassword"
            style="margin-right: 12px"
            >修改密码</el-button
          >
          <el-button type="info" @click="resetLoginForm">重置</el-button>
          <el-button type="primary" @click="login" @keyup.enter="login"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <div class="login-box" v-show="changePassword">
      <h1 style="font-size: 28px; text-align: center; color: #ffffff">
        修改密码
      </h1>
      <el-form
        ref="reviseFormRef"
        :model="changePasswordForm"
        :rules="ChangePasswordRules"
        class="login-form"
      >
        <el-form-item prop="username">
          <el-input
            placeholder="请输入用户名"
            prefix-icon="el-icon-user-solid"
            v-model="changePasswordForm.username"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="请输入旧密码"
            prefix-icon="el-icon-lock"
            v-model="changePasswordForm.password"
            show-password
          ></el-input>
        </el-form-item>

        <el-form-item prop="new_password">
          <el-input
            placeholder="请输入新密码"
            prefix-icon="el-icon-lock"
            v-model="changePasswordForm.new_password"
            show-password
          ></el-input>
        </el-form-item>
        <!-- 确认新密码 -->
        <el-form-item prop="confirm_password">
          <el-input
            placeholder="请再次输入新密码"
            prefix-icon="el-icon-lock"
            v-model="changePasswordForm.confirm_password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item class="login-btn" style="padding-top: 20px">
          <el-button type="info" @click="changePassword = false"
            >返回</el-button
          >
          <el-button
            type="primary"
            @click="submitChangePassword"
            @keyup.enter="submitChangePassword"
            >确定修改</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { commonRules } from "@/mixins/rules.js";
export default {
  mixins: [commonRules],
  data() {
    return {
      svg_captcha: null,
      changePassword: false,
      // 登录表单的数据
      form: {
        phone: "admin",
        password: "123456",
        code: "",
      },
      // 这是表单的验证规则对象
      LoginRules: {
        phone: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入用户密码", trigger: "blur" },
        ],
      },
      // 修改密码表单的数据
      changePasswordForm: {
        phone: "",
        password: "",
        new_password: "",
        confirm_password: "",
      },
      ChangePasswordRules: {
        phone: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
        ],
        new_password: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          // { min: 6,admin message: '新密码长度不能少于6个字符', trigger: 'blur' },
        ],
        confirm_password: [
          { required: true, message: "请再次输入新密码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              console.log(value, this.changePasswordForm.new_password);
              if (value === this.changePasswordForm.new_password) {
                return callback();
              }
              return callback(new Error("两次输入密码不一致"));
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    handleChangePassword() {
      this.changePassword = true;
    },
    async submitChangePassword() {
      this.$refs.reviseFormRef.validate(async (valid) => {
        if (!valid) return;
        const { code, msg, data } = await this.$http.post(
          "/api/login/revise_password",
          this.changePasswordForm
        );
        if (code !== 0) return this.$message.error(msg);
        this.$message.success("修改成功");
        this.changePassword = false;
        this.changePasswordForm = {
          phone: "",
          password: "",
          new_password: "",
          confirm_password: "",
        };
      });
    },
    // 重置按钮
    resetLoginForm() {
      this.$refs.loginFormRef.resetFields();
    },
    async login() {
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return;
        const { code, msg, data } = await this.$http.post(
          "/diet/admin/user/login",
          this.form
        );
        if (code !== 0) {
          await this.getSvgCaptcha();
          return this.$message.error(msg);
        }
        this.$message.success("登录成功");
        localStorage.setItem("token", data);
        this.$router.push("/home");
      });
    },
    async getSvgCaptcha() {
      const { data } = await this.$http.get("/diet/admin/user/captcha");
      this.svg_captcha = data;
    },
  },
  async mounted() {
    if (localStorage.getItem("token")) {
      //   this.$message.success('您已登录'); // 跳转后不会消失
      return this.$router.push("/home");
    }
    await this.getSvgCaptcha();
  },
};
</script>

<style lang="less" scoped>
::v-deep {
  .el-form-item__label {
    color: #ffffff !important;
  }
}
.login-container {
  position: relative;
  background-color: #264a69;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .login-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 450px;
    height: 340px;
    box-shadow: 10px 10px 20px rgba(33, 44, 55, 0.3);
    border-radius: 10px;

    .avatar-box {
      width: 130px;
      height: 130px;
      padding: 10px;
      border-radius: 50%;
      border: 1px solid #eee;
      border-radius: 50%;
      box-shadow: 0 0 10px #ddd;
      background-color: #fff;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);

      img {
        border-radius: 50%;
        width: 100%;
        height: 100%;
        background-color: aqua;
      }
    }
  }

  .login-form {
    box-sizing: border-box;
    background-color: #34495e;
    bottom: 0;
    width: 100%;
    padding: 22px 20px 0;

    .login-btn {
      display: flex;
      text-align: center;

      button {
        margin: 5px 0 20px 0;

        &:last-child {
          margin-left: 15px;
        }
      }
    }
  }
}

/* 鼠标进入 login 时的动画 */
@keyframes in {
  0% {
    width: 0;
    height: 0;
  }

  100% {
    width: 1200px;
    height: 1200px;
  }
}

/* 鼠标离开 login 时的动画 */
@keyframes out {
  0% {
    width: 1200px;
    height: 1200px;
  }

  100% {
    width: 0;
    height: 0;
  }
}
</style>
